<template>
	<view class="content">
		<view class="contentTop">
			<image src="../../static/images/suns.png" class="bgSizeImage"></image>
			<view class="contentTop_t">
				<view class="contentTop_t_hot">
					晴 25°C
				</view>
				<view>
					宁波 下午 : 04 : 21
				</view>
			</view>
			<view class="contentTop_c">
				<view class="contentTop_c_car">
					我的 宝马i8
				</view>
				<view class="contentTop_c_size">
					更换
				</view>
			</view>
			<view class="contentTop_b">
				<view class="mileNumber">
					里程数:
				</view>
				<view class="mileNumber_n">
					259999
				</view>
				<view class="mileNumber">
					Km
				</view>
				<view class="mileNumber">
					<!-- <u-icon name="edit-pen"></u-icon> -->
					<image src="../../static/images/editt.png" class="editt"></image>
				</view>
			</view>
			<view class="carhomeSed">
				<image src="../../static/images/carshome.png" class="sendImgSon"></image>
			</view>
		</view>
		<view class="centerImage">
		</view>
		<view class="contentBottom">
			<view class="contentBottom_item">
				<view class="contentBottom_item_img">
					<image src="../../static/images/hm-6.png" class="sonImged"></image>
				</view>
				<view class="contentBottom_item_text">
					汽车保养
				</view>
			</view>
			<view class="contentBottom_item">
				<view class="contentBottom_item_img">
					<image src="../../static/images/hm-4.png" class="sonImged"></image>
				</view>
				<view class="contentBottom_item_text">
					道路救援
				</view>
			</view>
			<view class="contentBottom_item">
				<view class="contentBottom_item_img">
					<image src="../../static/images/hm-2.png" class="sonImged"></image>
				</view>
				<view class="contentBottom_item_text">
					年检代办
				</view>
			</view>
			<view class="contentBottom_item">
				<view class="contentBottom_item_img">
					<image src="../../static/images/hm-7.png" class="sonImged"></image>
				</view>
				<view class="contentBottom_item_text">
					违章查询
				</view>
			</view>
			<view class="contentBottom_item">
				<view class="contentBottom_item_img">
					<image src="../../static/images/hm-1.png" class="sonImged"></image>
				</view>
				<view class="contentBottom_item_text">
					爱车档案
				</view>
			</view>
			<view class="contentBottom_item">
				<view class="contentBottom_item_img">
					<image src="../../static/images/hm-8.png" class="sonImged"></image>
				</view>
				<view class="contentBottom_item_text">
					优惠洗车
				</view>
			</view>
			<view class="contentBottom_item">
				<view class="contentBottom_item_img">
					<image src="../../static/images/hm-5.png" class="sonImged"></image>
				</view>
				<view class="contentBottom_item_text">
					卖车估价
				</view>
			</view>
			<view class="contentBottom_item">
				<view class="contentBottom_item_img">
					<image src="../../static/images/hm-3.png" class="sonImged"></image>
				</view>
				<view class="contentBottom_item_text">
					车险报价
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.contentTop {
			position: relative;
			width: 100%;
			height: 770rpx;
			padding-top: 140rpx;
			overflow: hidden;
			background-size: 100% 100%;

			.bgSizeImage {
				position: absolute;
				top: -2rpx;
				width: 100%;
				height: 770rpx;
				z-index: -999;
				left: 0;
				right: 0;
				bottom: 0;
				box-sizing: border-box;
			}

			.contentTop_t {
				display: flex;
				font-size: 25rpx;
				color: #FFFFFF;
				align-items: center;
				height: 50rpx;
				justify-content: center;
				margin-bottom: 110rpx;

				.contentTop_t_hot {
					font-size: 38rpx;
					margin-right: 25rpx;
				}
			}

			.contentTop_c {
				display: flex;
				color: #FFFFFF;
				align-items: center;
				height: 50rpx;
				justify-content: center;
				margin-bottom: 35rpx;

				.contentTop_c_car {
					font-size: 45rpx;
					font-weight: 300;
				}

				.contentTop_c_size {
					height: 50rpx;
					box-sizing: border-box;
					font-size: 29rpx;
					// border-left: 1rpx solid #FFFFFF;
					// border-right: 1rpx solid #FFFFFF;
					width: 95rpx;
					border-radius: 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 20rpx;
					background: url(../../static/images/btnBgc.png) no-repeat;
					background-size: 100% 100%;
				}
			}

			.contentTop_b {
				display: flex;
				color: #FFFFFF;
				align-items: center;
				height: 40rpx;
				width: 100%;
				justify-content: center;
				margin-bottom: 40rpx;

				.mileNumber {
					font-size: 28rpx;
					margin: 0 10rpx;
					font-weight: 300;
					.editt{
						width: 35rpx;
						height: 35rpx;
					}
				}

				.mileNumber_n {
					font-weight: 500;
				}
			}

			.carhomeSed {
				width: 100%;
				height: 270rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.sendImgSon {
					width: 600rpx;
					height: 100%;
				}
			}
		}

		.centerImage {
			width: 100%;
			height: 5rpx;
			background: linear-gradient(to bottom, #ffffff, #f9feff);
			box-shadow: 0rpx 0rpx 20rpx 20rpx #FFFFFF;
		}

		.contentBottom {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 15rpx;
			box-sizing: border-box;

			.contentBottom_item {
				width: 170rpx;
				height: 190rpx;
				padding: 10rpx;
				display: flex;
				box-sizing: border-box;
				flex-direction: column;
				align-items: center;

				.contentBottom_item_img {
					// display: flex;
					// align-items: center;
					// justify-content: center;
					width: 125rpx;
					height: 125rpx;
					// border-radius: 50%;
					// background-color: #FFFFFF;
					// -webkit-box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(240, 240, 240, 1);
					// -moz-box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(240, 240, 240, 1);
					// box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(240, 240, 240, 1);
					margin-bottom: 15rpx;

					.sonImged {
						width: 100%;
						height: 100%;
					}
				}

				.contentBottom_item_text {
					font-size: 26rpx;
					color: #282828;
				}
			}
		}
	}
</style>
